<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div>
        <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="click" />
    </div>
</template>

<script>
import screenfull from 'screenfull'

export default {
    name: 'Screenfull',
    data () {
        return {
            isFullscreen: false
        }
    },
    mounted () {
        this.init()
    },
    beforeDestroy () {
        this.destroy()
    },
    methods: {
        click () {
            if (!screenfull.enabled) {
                this.$message({
                    message: 'you browser can not work',
                    type: 'warning'
                })
                return false
            }
            screenfull.toggle()
        },
        change () {
            this.isFullscreen = screenfull.isFullscreen
        },
        init () {
            if (screenfull.enabled) {
                screenfull.on('change', this.change)
            }
        },
        destroy () {
            if (screenfull.enabled) {
                screenfull.off('change', this.change)
            }
        }
    }
}
</script>

<style scoped>
.screenfull-svg {
    display: inline-block;
    cursor: pointer;
    fill: #5a5e66;
    ;
    width: 20px;
    height: 20px;
    vertical-align: 10px;
}
</style>
